<template>
  <div class="rule-details-list">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="item"
    >
      <div v-if="item.content" class="content">{{ item.content }}</div>

      <div v-else class="item-placeholder">
        <div class="block" />
        <div class="block" />
        <div class="block" />
        <div class="block" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

    }
  }
}
</script>
<style lang="scss" scoped>
.rule-details-list {
  .item {
    margin-bottom: 16px;
    &-placeholder {
      .block {
        width: 100%;
        height: 10px;
        background-color: #E6E8EB;
        border-radius: 2px;
        margin-bottom: 5px;

        &:last-child {
          margin-bottom: 0;
        }

      }
    }

    .content {
      word-break: break-all;
      font-weight: 400;
      font-size: 12px;
      color: #909399;
      font-family: HONOR Sans CN, HONOR Sans CN;
      line-height: 16px;
    }
  }
}
</style>
